<template>
<h3>数组变换监听</h3>
  <button @click="addData">添加数据</button>
  <ul>
    <li v-for="item in array">{{item}}</li>
  </ul>
  <h4>数组1</h4>
  <div>
    <h5 v-for="item in nums1">{{item}}</h5>
  </div>

  <h4>数组2</h4>
  <div>
    <h5 v-for="item in nums2">{{item}}</h5>
  </div>
  <div><button @click="concatNum">点击合并数组</button></div>
</template>

<script>
export default {
  name: "ArrayList",
  data(){
    return{
      array:["iwen","ime","frank"],
      nums1:[1,2,3,4,5],
      nums2:[8,9,10,11]
    }
  },
  methods:{
    addData(){
      //vue可以监听响应式数组的变更方法
      // this.array.push("sakura")->可以响应式
      this.array.concat(["name","jiankang"])//不可以响应式
      this.array=this.array.concat(["tom","jerry"])//可以响应式
    },
    concatNum(){
     this.nums1= this.nums1.concat(this.nums2)
    }
  }
}
</script>

<style scoped>

</style>
